<template>
  <div class="model-file-content">
    <ul>
      <li v-for="(item, index) in images">
        <div class="__file_list">
          <div class="__preview_wrap" @click="onSelect(item,index)">
            <img :src="item.file_name" />
            <div :class="'__layer'+sub" :style="onShow(item.file_id)" v-if="onShow(item.file_id)">
              <div class="__circle">
                <i class="el-icon-check __icon"></i>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script type="text/javascript">
export default {
  data(){
    return{

    }
  },
  props: {
    images: [Array, Object],
    value: [Array, Object],
    limit: [Number, String],
    sub:[Number,String]
  },

  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    /**
     * 选中状态
     * @return {[type]} [description]
     */
    onShow(id) {
      if (this.value.length == 0) {
        return "display:none";
      }
      for (var key in this.value) {
        if (this.value[key].file_id == id) {
          return "display:block";
        } else {
          var res = "display:none";
        }
      }
      return res;
    },
    /**
     * 选择图片
     * @param  {[type]} item  [description]
     * @param  {[type]} index [description]
     * @return {[type]}       [description]
     */
    onSelect(item, index) {
      var classIndex = "__layer" + this.sub;
      var odiv = document.getElementsByClassName(classIndex)[index];
      var display = odiv.style.display;
      var _data = [];
      if (display == 'none') {
        // 限制选择张数
        if (this.value.length + 1 > Number(this.limit)) {
          return false;
        }
        this.value.push(item);
        odiv.style.display = 'block';
      } else {
        for (var key in this.value) {
          if (this.value[key].file_id != item.file_id) {
            _data.push(this.value[key]);
          }
        }
        odiv.style.display = 'none';
        this.$emit('input', _data);
      }
    }

  }
}

</script>
<style type="text/css" lang="scss">
.model-file-content {
  height: 360px;
  overflow-x: hidden;
  overflow-y: auto;
  width: 600px;
  box-sizing: border-box;
  padding: 5px 15px 15px 15px;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */

  ul {

    overflow: hidden;
    padding: 0;
    margin: 0;
    margin-top: -10px;
    margin-right: -36px;
  }

  li {
    float: left;
    margin-right: 20px;
    margin-top: 20px;
    list-style: none;

    .__file_list {
      position: relative;
      height: 100%;
      cursor: pointer;
    }

    .__preview_wrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 90px;
      height: 90px;
      background: #f3f3f3;

      img {
        max-width: 100%;
        max-height: 100%;
        min-width: 1px;
        min-height: 1px;
        width: auto;
        height: auto;
        border: 0;
        vertical-align: top;
      }

      .__circle {
        position: absolute;
        width: 18px;
        height: 15px;
        background-color: #5874d8;
        -webkit-border-radius: 15px 0 0 0;
        right: 0;
        bottom: 0;
        padding-left: 4px;
        line-height: 15px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        /* Firefox */
        -webkit-box-sizing: border-box;

        /* Safari */
        .__icon {
          font-size: 14px;
          color: #fff;
        }
      }

      .__layer {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        border: 1px solid #5874d8;
        left: 0;
        top: 0;
        box-sizing: border-box;
      }
    }
  }

}

</style>
